<template>
  <div class="w-100 h-100">
    <div style="width: 100; height: 10%">
      <fakeLenfend
        :color="colorSingleList"
        :text="['透水景观辅装', '透水路面辅装', '绿色建筑']"
      >
      </fakeLenfend>
    </div>
    <div style="width: 100%; height: 85%; display: flex">
      <div style="width: 50%; height: 83%">
        <pie_bk
          :echartsId="'jsmj_1'"
          :echartsData="pieData"
          v-if="pieData"
        ></pie_bk>
        <div class="d-flex justify-content-around">
          <div class="title">
            <div>
              规划
            </div>
        </div>
        </div>
       
      </div>
      <div style="width: 50%; height: 83%">
        <pie_bk
          :echartsId="'jsmj_2'"
          :echartsData="pieData1"
          v-if="pieData1"
        ></pie_bk>
      
        <div class="d-flex justify-content-around">
          <div class="title">
            <div>
              现状
            </div>
        </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import * as echarts from "echarts";
import fakeLenfend from "@/components/project/fakeLegend.vue";
import { useOptions } from "@/hook/useOptions";
import pie_bk from "@/components/project/piebk_vue3.vue";
import P from "@/assets/test/extend/xp/plotUtil";

const props = defineProps({
  echartsData: {
    type: Array,
    default: () => [],
  },
});
var colors = useOptions().colors.value;
const colorSingleList = [
  "rgba(3, 230, 254, 1)",
  "rgba(184, 235, 143, 1)",
  "rgba(242, 108, 71, 1)",
  // "rgba(251, 216, 160, 1)",
];
// var total = props.echartsData.reduce((p, v: any) => {
//   return p + v.value;
// }, 0);
// let option = {
//   tooltip: {
//     trigger: "item",
//     formatter: "{b} : {c} ({d}%)",
//   },
//   color: colors,
//   calculable: true,
//   series: [
//     {
//       type: "pie",
//       radius: ["30%", "65%"],
//       center: ["50%", "50%"],
//       //  roseType: 'radius',
//       label: {
//         show: true,
//         color: "inherit",
//         position: "outside",
//         fontSize: 14,
//         formatter: "{b} {d}%",
//       },
//       labelLine: {
//         length: 1,
//         length2: 20,
//         smooth: true,
//       },
//       data: props.echartsData,
//     },
//   ],
// };
let myChart1: any = null;
let myChart2: any = null;
const pieData: any = ref(null);
const pieData1: any = ref(null);
onMounted(() => {
  pieData.value = [
    { value: 18, name: "小型项目" },
    { value: 5, name: "中型项目" },
    { value: 7, name: "大型项目" },
    // { value: 16, name: "超大型项目" },
  ];
  pieData1.value = [
    { value: 16, name: "小型项目" },
    { value: 4, name: "中型项目" },
    { value: 6, name: "大型项目" },
    // { value: 16, name: "超大型项目" },
  ];
  console.log(pieData, "props.11111");

  // myChart1 = echarts.init(document.getElementById("jsmj_11") as HTMLElement);
  // myChart1.setOption(option);
  // myChart2 = echarts.init(document.getElementById("jsmj_2") as HTMLElement);
  // myChart2.setOption(option);
});
onBeforeUnmount(() => {
  // 销毁 ECharts 实例
  // if (myChart1 && myChart2) {
  //   myChart1.dispose();
  //   myChart2.dispose();
  // }
});
</script>

<style lang="less" scoped>
.title{
  color: #FFF;
  text-align: center;
  line-height: 44px;
  width: 152px;
height: 44px;
background-image: url("../../../../assets/image/underGround/text_bk2.png");
border-radius: 0px 0px 0px 0px;
// opacity: 0.26;
}
</style>
